<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>客户主页</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <style>
    .nav a { display: block; padding: 10px 15px; color: #333; text-decoration: none; }
    .dropdown { position: relative; }
    .dropdown > a::after { content: '▼'; float: right; font-size: 10px; margin-top: 4px; }
    .dropdown-content {
      display: none; flex-direction: column; background-color: #f7f9fc; padding-left: 20px;
    }
    .dropdown:hover .dropdown-content,
    .dropdown.active .dropdown-content {
      display: flex;
    }
    .dropdown-content a {
      padding: 8px 10px; font-size: 14px;
    }
    .nav a:hover { background-color: #e6f0ff; }
    .topbar {
      padding: 20px;
      background-color: #f5f9ff;
      border-bottom: 1px solid #e0e0e0;
    }
    .topbar h1 {
      margin: 0;
      font-size: 20px;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <div class="layout">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="user-profile">
        <img src="{{ url_for('static', filename='user.png') }}" alt="头像">
        <div class="username">{{ session.get('customer_name') }}</div>
      </div>
      <div class="nav">
        <a href="{{ url_for('customer.customer_home') }}"><i class="bi bi-house-door"></i> 首页</a>

        <a href="{{ url_for('customer.balance') }}"><i class="bi bi-wallet"></i> 余额查询</a>
        <a href="{{ url_for('customer.transactions') }}"><i class="bi bi-card-list"></i> 交易记录</a>
        <div class="dropdown">
          <a href="#"><i class="bi bi-arrow-left-right"></i> 交易中心</a>
          <div class="dropdown-content">
            <a href="{{ url_for('customer.deposit') }}">💰 存款</a>
            <a href="{{ url_for('customer.withdraw') }}">💸 取款</a>
            <a href="{{ url_for('customer.transfer') }}">🔁 转账</a>
          </div>
        </div>
        <a href="{{ url_for('customer.report_lost') }}"><i class="bi bi-exclamation-circle"></i> 挂失</a>
        <div class="dropdown">
          <a href="#"><i class="bi bi-lock"></i> 修改密码</a>
          <div class="dropdown-content">
            <a href="{{ url_for('customer.change_password') }}">已知原密码修改</a>
            <a href="{{ url_for('customer.forget_password_reset') }}">忘记密码重置</a>
          </div>
        </div>
        <a href="{{ url_for('logout') }}"><i class="bi bi-box-arrow-right"></i> 退出登录</a>
      </div>
    </div>

    <!-- 主内容区 -->
      <div class="main">
            <div class="topbar">
                {% if request.endpoint == 'customer.customer_home' %}
                <h1>欢迎 {{ session.get('customer_name') }}，您可以在此快速操作系统功能</h1>
            {% endif %}
        </div>
         <div class="content">
            {% block content %}{% endblock %}
        </div>
      </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.dropdown > a').forEach(function (toggle) {
        toggle.addEventListener('click', function (e) {
          e.preventDefault();
          const parent = this.parentElement;
          parent.classList.toggle('active');
        });
      });
    });
  </script>
</body>
</html>